<template>
	<view>
		<u-navbar :title="title" back-icon-size='44' :border-bottom='false'></u-navbar>
		<view class="calendar-demo" :style="{top: statusHeight +'px'}">
			<view style="white-space: nowrap">
				<scroll-view scroll-x="true">
					<view class="calendar">
						<view class="dayBox" :class="{active:index==current}" v-for="(item,index) in days" :key='index'
							@click="changeDay(index)">
							<view class="day">
								<view class="date">
									{{item.day}}
								</view>
								<view class="week">
									{{item.week}}
								</view>
								<!-- <view class="price">
									100起
								</view> -->
							</view>
							<view class="line">
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="calendar-pop" @click="showPop=true">
				<image class="more" src="../../../../static/imgs/gdrq.png" mode=""></image>
				<image class="dwon" src="../../../../static/imgs/gdrq1.png" mode=""></image>
			</view>
		</view>
		<!-- 间隔 -->
		<view>
			<u-gap height="24" bg-color="#F2F2F7"></u-gap>
		</view>
		<view class="container">
			<view class="ticket-ul" v-if="ticketList.length">
				<view class="ticket-li" v-for="(air,airx) in ticketList" :key='airx' @click="navTo(airx)">
					<view class="top">
						<image class="logo" src="../../../../static/imgs/airLogo.png" mode=""></image>
						<view class="start">
							<view class="time">
								{{air.depTime.split(' ')[1]}}
							</view>
							<view class="address">
								{{air.depPort}}
							</view>
						</view>
						<view class="stop">
							<view class="time">
								{{air.arrTime.split(' ')[1]}}
							</view>
							<view class="address">
								{{air.arrPort}}
							</view>
						</view>
						<view class="price">
							<view class="price-tit" style="text-align: right;">
								¥ {{air.lowSeatItems.policys.priceDatas[0].price}}
							</view>
							<view class="price-disc" v-if="air.lowSeatItems.discount<1&& air.lowSeatItems.discount>0">
								{{air.lowSeatItems.seatMsg}}{{Number(air.lowSeatItems.discount*10).toFixed(1)}}折
							</view>
						</view>
					</view>

					<view class="bottom">
						<view class="air-com">
							{{air.company}} {{air.flightNo}}
						</view>
						<view class="line">
						</view>
						<view class="air-type">
							{{air.planeCnName}}（{{air.planeSize==1?'大':air.planeSize==2?'中':'小'}}）
						</view>
						<view class="line">
						</view>
						<view class="air-type1">
							{{air.planeSize==1?'大':air.planeSize==2?'中':'小'}}机型
						</view>
					</view>
				</view>
			</view>
			<view class="noCont" v-else>
				<u-empty mode="search"></u-empty>
			</view>
		</view>
		<view class="filter" v-if="isShow">
			<view class="filter-item" @click="showFilter=true" :class="{filterAct:filter}">
				<image v-if="filter" src="../../../../static/imgs/shaixuantu.png" mode=""></image>
				<image v-else src="../../../../static/imgs/shaixuantuh.png" mode=""></image>
				<text>筛选</text>
			</view>
			<view class="filter-item">
				<image src="../../../../static/imgs/sjpxh.png" mode=""></image>
				<text>时间</text>
			</view>
			<view class="filter-item">
				<image src="../../../../static/imgs/jgpxh.png" mode=""></image>
				<text>价格</text>
			</view>
		</view>
		
		<u-popup v-model="showPop" mode='bottom' :closeable='true' border-radius='24'>
			<view class="calendar-pop">
				<view class="moreDate">
					选择日期
				</view>
				<calendar @changeDate="changeDate" :defaultSelect='defaultSelect'></calendar>
			</view>
		</u-popup>

		<u-popup v-model="showFilter" mode='bottom'>
			<view class="filterPop">
				<view class="top">
					<view class="cancel" @click="showFilter=false">
						取消
					</view>
					<view class="submit" @click="submitFn">
						确定
					</view>
				</view>
				<view class="mainBox">
					<view class="ceside">
						<view class="ceside-item" :class="{act:cur == 0}" @click="choose(0)">
							起飞时间
						</view>
						<view class="ceside-item" :class="{act:cur == 1}" @click="choose(1)">
							舱位
						</view>
					</view>
					<view class="mainside" v-if="cur == 0">
						<u-checkbox-group style="display: flex;flex-direction: column;" @change="changeAll">
							<u-checkbox v-model="item.checked" v-for="(item,index) in timeList" :key='index'
								:name="item.name" @change="checkChange" shape="circle">{{item.name}}</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="mainside" v-if="cur == 1">
						<u-checkbox-group style="display: flex;flex-direction: column;" @change="changeAll1">
							<u-checkbox v-model="item.checked" v-for="(item,index) in cwList" :key='index'
								:name="item.type" @change="checkCw" shape="circle">{{item.name}}</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	import calendar from '@/components/calendar/hd-calendar.vue'
	import utils from '@/common/utils.js'
	export default {
		components: {
			calendar
		},
		data() {
			return {
				cwList: [{
					name: '经济舱',
					checked: false,
					type: 2
				}, {
					name: '头等舱/商务舱',
					checked: false,
					type: 1
				}],
				timeList: [{
						name: '不限',
						checked: false,
					},
					{
						name: '00:00-06:00',
						checked: false,
					},
					{
						name: '06:00-12:00',
						checked: false,
					},
					{
						name: '12:00-24:00',
						checked: false,
					}
				],
				cur: 0,
				showFilter: false,
				title: '',
				checked: true,
				showPop: false,
				current: -1,
				days: [],
				showfilter: false,
				showStartDate: '',
				defaultSelect: '',
				startDate: '', // 出发日期
				startAddr: '', //出发地
				endAddr: '', // 目的地
				peoType: '', // 乘客类型
				cwType: '', // 舱位类型
				ticketList: [],
				startCode: '',
				endCode: '',
				times: '', //时间段
				statusHeight:0,
				filter:false,
				isShow:false
			}
		},
		mounted() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.statusHeight = res.statusBarHeight + 44
				}
			})
		},
		onPageScroll(e) {
			if(e.scrollTop > 20) {
				this.isShow =true
			}else {
				this.isShow =false
			}
		},
		onLoad() {
			let obj = this.$store.state.searchJp
			if (obj) {
				this.startAddr = obj.startAddr
				this.endAddr = obj.endAddr
				this.title = obj.startAddr + '-' + obj.endAddr
				this.peoType = obj.peoType
				this.cwType = obj.cwType
				this.showStartDate = utils.formatDate(obj.departDate, 'MM-DD')
				this.defaultSelect = obj.departDate
				this.startDate = utils.formatDate(obj.departDate, 'YYYY-MM-DD')
			}
			this.getDateTravel()
		},
		onShow() {
			this.getAirportList()
		},
		methods: {
			submitFn() {
				this.getFlightres()
			},
			changeAll(e) {
				if(e.length == 0) {
					this.filter = false
				}else {
					this.filter = true
				}
				if (e.toString() == '不限') {
					this.times = ''
				} else {
					this.times = e.toString()
				}
			},
			changeAll1(e) {
				if(e.length == 0) {
					this.filter = false
				}else {
					this.filter = true
				}
				this.cwType = e.toString()
			},
			checkCw(e) {
				this.cwList.forEach(item => {
					item.checked = false
					if (e.name == item.type) {
						item.checked = true
					}
				})
			},
			checkChange(e) {
				this.timeList.forEach(item => {
					item.checked = false
					if (e.name == item.name) {
						item.checked = true
					}
				})
			},
			choose(index) {
				this.cur = index
			},
			// 获取三字码
			async getAirportList() {
				let res = await myRequest.getAirport()
				if (res.status) {
					res.data.forEach(item => {
						if (this.startAddr == item.city_name) {
							this.startCode = item.city_code
						}
						if (this.endAddr == item.city_name) {
							this.endCode = item.city_code
						}
					})
					this.getFlightres()
				}
			},
			// 搜索结果
			async getFlightres() {
				let {
					startDate,
					startCode,
					endCode,
					peoType,
					cwType,
					times
				} = this
				let res = await myRequest.getFlight({
					start_date: startDate,
					departure: startCode,
					arrival: endCode,
					passenger_type: peoType.toString(),
					cabin_type: cwType.toString(),
					times: times
				})
				if (res.status) {
					let list = []
					res.data.forEach(item => {
						if (item.arrCode) {
							list.push(item)
						}
					})
					this.ticketList = list
					this.showFilter = false

					this.ticketList.forEach(item => {

					})
				}
			},

			getDateTravel(date) {
				this.days = []
				for (var i = 0; i < 6; i++) {
					let dayObj = {
						day: this.getDateStr(i, date),
						week: '',
						lowPrice: ''
					}
					this.days.push(dayObj)
				}
				this.days.forEach((item, index) => {
					item.week = '周' + item.day.split('周')[1]
					item.day = item.day.split('周')[0]
					if (item.day == this.showStartDate) {
						this.current = index
					}
				})
				// console.log(this.days)
			},
			// 获取一周内日期
			getDateStr(Count, date) {
				var dd
				if (!date) {
					dd = new Date();
				} else {
					dd = new Date(date)
				}
				dd.setDate(dd.getDate() + Count);
				var y = dd.getFullYear()
				var m = dd.getMonth() + 1;
				var d = dd.getDate();
				var w = dd.getDay();
				m = m < 10 ? '0' + m : m;
				d = d < 10 ? '0' + d : d;
				var week;
				switch (w) {
					case 0:
						week = '周日';
						break;
					case 1:
						week = '周一';
						break;
					case 2:
						week = '周二';
						break;
					case 3:
						week = '周三';
						break;
					case 4:
						week = '周四';
						break;
					case 5:
						week = '周五';
						break;
					case 6:
						week = '周六';
						break;
				}
				return m + "-" + d + week;
			},
			changeDate(e) {
				// 清除已选择
				this.ticketList = []
				this.defaultSelect = ''
				this.startDate = e.date
				this.current = -1
				this.showPop = false
				this.getDateTravel(e.date)
				this.days.forEach((item, index) => {
					item.day = item.day.split('周')[0]
					if (item.day == utils.formatDate(e.date, 'MM-DD')) {
						this.current = index
					}
				})
				this.getFlightres()
			},
			navTo(aix) {
				let obj = this.ticketList[aix]
				this.$store.commit('changeAirDetail', obj)
				// 保存当前航班详并跳转
				uni.navigateTo({
					url: '../planeBuy?cwType=' + this.cwType
				})
			},
			changeDay(index) {
				this.ticketList = []
				this.current = index
				let date = new Date()
				this.defaultSelect = date.getFullYear() + '-' + this.days[index].day
				this.startDate = this.defaultSelect
				this.getFlightres()
			},
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.calendar-demo {
		position: sticky;
		z-index: 11;
		padding-right: 104rpx;

		.calendar-pop {
			width: 104rpx;
			height: 116rpx;
			background-color: #FFFFFF;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-shadow: 1px -2px 4px #999;

			.more {
				width: 36rpx;
				height: 36rpx;
			}

			.dwon {
				margin-top: 4rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.calendar {
			width: 100%;

			.dayBox {
				display: inline-block;
				width: 120rpx;
				height: 120rpx;
				background-color: #FFFFFF;
				text-align: center;
				padding: 20rpx 0;
				color: #333333;

				&.active {
					background-color: #3587F7;
					color: #FFFFFF;

					.line {
						opacity: 0;
					}
				}

				.day {
					display: inline-block;
					width: 99%;

					.date {
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}

					.week,
					.price {
						font-size: 20rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}
				}

				.line {
					display: inline-block;
					width: 2rpx;
					height: 58rpx;
					background-color: #F2F2F7;
				}
			}
		}
	}

	.container {
		width: 100%;
		padding: 0 24rpx 100rpx;

		.ticket-ul {
			.ticket-li {
				height: 188rpx;
				border-bottom: 2rpx solid #F2F2F7;
				display: flex;
				flex-direction: column;
				justify-content: center;

				&:last-child {
					border-bottom: none
				}


				.top {
					display: flex;
					align-items: center;

					.logo {
						width: 48rpx;
						height: 48rpx;
						margin-right: 26rpx;
					}

					.airTo {
						width: 84rpx;
						height: 10rpx;
					}

					.price {
						margin-left: auto;

						.price-tit {
							font-size: 36rpx;
							font-family: Alibaba Sans;
							font-weight: bold;
							color: #3587F7;
						}

						.price-disc {

							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #999999;
						}
					}

					.stop {
						margin-left: 200rpx;
					}

					.start,
					.stop {
						.time {
							font-size: 36rpx;
							font-family: Alibaba Sans;
							font-weight: bold;
							color: #333333;
						}

						.address {
							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: bold;
							color: #333333;
						}
					}
				}

				.bottom {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					padding-left: 74rpx;
					margin-top: 16rpx;

					.air-com,
					.air-type {
						font-family: Segoe UI;
						font-weight: 400;
						color: #999999;
					}

					.air-type {}

					.air-type1 {
						font-family: Segoe UI;
						font-weight: 400;
						color: #53B794;
					}

					.line {
						margin: 0 12rpx;
						width: 0px;
						height: 12px;
						border: 1px solid #F2F2F2;
						opacity: 1;
					}
				}
			}
		}
	}

	.calendar-pop {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;

		.moreDate {
			padding-top: 28rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}

	.filter-pop {
		padding: 0 28rpx 32rpx;

		.title {
			text-align: center;
			padding-top: 28rpx;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 600;
			color: #333333;
		}

		.lable {
			padding: 24rpx 0;
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
		}
	}

	.noCont {
		padding-top: 320rpx;
	}

	.filterPop {
		.top {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 28rpx;

			.submit {
				color: #4399DB;
			}
		}

		.mainBox {
			display: flex;
			height: 216rpx;
		}

		.ceside {
			width: 180rpx;
			height: auto;

			.ceside-item {
				width: 180rpx;
				height: 88rpx;
				background-color: #F4F4F4;
				text-align: center;
				line-height: 88rpx;
			}

			.act {
				background-color: #FFFFFF
			}
		}

		.mainside {
			padding-left: 32rpx;
		}
	}

	.filter {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		box-shadow:inset 0px 4px 3px -2px #f2f2f2;
		.filter-item {
			flex: 1;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image {
				width: 32rpx;
				height: 32rpx;
			}
			text {
				font-size: 24rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}
		}
		.filterAct {
			text {
				color: #3587F7;
			}
		}
	}
</style>
